<template>
  <div style="background: #f2f2f2;">
    <div class="header">
      <TopBar></TopBar>
      <div class="header-c">
        <div class="h-l">
          <ul>
            <li>
              <img src="../../images/SearchBarImages/logo.gif" alt class="logo" />
            </li>
            <li>
              <p>产品中心</p>
            </li>
          </ul>
        </div>
        <div class="h-r">
          <ul>
            <li>
              <img src="../../images/Product/cusotmer.jpg" alt />
              <span>买家放心</span>
            </li>
            <li>
              <img src="../../images/Product/marchant.jpg" alt />
              <span>卖家舒心</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-c">
        <div class="productList">
          <div class="channel-title">
            现货大厅
            <span>/ 供应不中断，物流有保障</span>
          </div>
          <div class="infoImg"></div>
          <div class="index-goods ft">
            <ul class="clearfix_jx">
              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">沁水新奥</p>
                <p class="labels">
                  <span>-158℃</span>
                  <span>36.8兆焦/立方米</span>
                  <span>1480Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3300
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('0728DD04AEE323B6F8EDA0634AE65863','山西沁水新奥燃气有限公司')">购买</a>
                </p>
              </li>

              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">河南京宝焦炉煤气</p>
                <p class="labels">
                  <span>-160℃</span>
                  <span>49.91兆焦/立方米</span>
                  <span>1494Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3420
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('CFB2F38D2ABD177C235276C75BD79D38','河南京宝新奥新能源有限公司')">购买</a>
                </p>
              </li>

              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">三聚家景</p>
                <p class="labels">
                  <span>-162℃</span>
                  <span>49.49兆焦/立方米</span>
                  <span>1489Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3350
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('AAB1C6C4D8371588499E79558F2FBEBD','内蒙古三聚家景新能源有限公司')">购买</a>
                </p>
              </li>
               <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">三聚家景</p>
                <p class="labels">
                  <span>-162℃</span>
                  <span>49.49兆焦/立方米</span>
                  <span>1489Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3350
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('AAB1C6C4D8371588499E79558F2FBEBD','内蒙古三聚家景新能源有限公司')">购买</a>
                </p>
              </li>
            </ul>
          </div>
        </div>
           <div class="productList">
          <div class="channel-title">
            现货大厅
            <span>/ 供应不中断，物流有保障</span>
          </div>
          <div class="infoImg"></div>
          <div class="index-goods ft">
            <ul class="clearfix_jx">
              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">沁水新奥</p>
                <p class="labels">
                  <span>-158℃</span>
                  <span>36.8兆焦/立方米</span>
                  <span>1480Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3300
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('0728DD04AEE323B6F8EDA0634AE65863','山西沁水新奥燃气有限公司')">购买</a>
                </p>
              </li>

              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">河南京宝焦炉煤气</p>
                <p class="labels">
                  <span>-160℃</span>
                  <span>49.91兆焦/立方米</span>
                  <span>1494Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3420
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('CFB2F38D2ABD177C235276C75BD79D38','河南京宝新奥新能源有限公司')">购买</a>
                </p>
              </li>

              <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">三聚家景</p>
                <p class="labels">
                  <span>-162℃</span>
                  <span>49.49兆焦/立方米</span>
                  <span>1489Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3350
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('AAB1C6C4D8371588499E79558F2FBEBD','内蒙古三聚家景新能源有限公司')">购买</a>
                </p>
              </li>
               <li>
                <div class="ig-type false-shop">商家</div>
                <p class="title">三聚家景</p>
                <p class="labels">
                  <span>-162℃</span>
                  <span>49.49兆焦/立方米</span>
                  <span>1489Nm³/T</span>
                </p>
                <p class="ig-num">供应量：20吨</p>
                <div class="word-c price-c clearfix_jx">
                  <sub class="unit ft">¥</sub>
                  <div class="price ft">
                    3350
                    <div class="price-type">出厂价</div>
                  </div>
                  <sub>/吨</sub>
                </div>
                <p class="ig-area">销售区域：不限</p>
                <p class="ig-btn">
                  <a onclick="toBuy('AAB1C6C4D8371588499E79558F2FBEBD','内蒙古三聚家景新能源有限公司')">购买</a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "../../components/TopBar";
export default {
  data() {
    return {};
  },
  components: {
    TopBar
  }
};
</script>

<style scoped lang="scss">
.header {
  background: #fff;
  .header-c {
    width: 1500px;
    margin: 0 auto;
    height: 150px;
    overflow: hidden;
    .h-l {
      float: left;
      margin-top: 18px;
      li {
        float: left;
        line-height: 100px;
        img {
          width: 200px;
          height: 100px;
          margin-right: 30px;
        }
        margin-left: 20px;
        &:last-child {
          margin-top: 32px;
          font-weight: 600;
          line-height: 20px;
          padding-left: 20px;
          font-size: 20px;
          border-left: 1px solid #e2e2e2;
        }
      }
    }
    .h-r {
      float: right;
      li {
        float: left;
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        height: 80px;
        width: 80px;
        margin-top: 40px;
        &:last-child {
          img {
            width: 58px;
            height: 56px;
          }
        }
      }
    }
  }
}
.main {
  .main-c {
    overflow: hidden;
    width: 1520px;
    margin: 0 auto;
    .productList {
      overflow: hidden;
      .channel-title {
        color: #0780ed;
        border-color: #0780ed;
        height: 30px;
        margin: 25px 0;
        padding-left: 15px;
        font-size: 24px;
        line-height: 30px;
        border-left: 5px solid #0780ed;
        span {
          font-size: 16px;
          margin-left: 10px;
        }
      }
      .infoImg {
        background: url("../../images/Product/bg1.png");
        width: 240px;
        height: 370px;
        color: #fff;
        line-height: 20px;
        padding: 20px;
        float: left;
      }
      .ft {
        float: left;
        background: #fff;
        .clearfix_jx {
          zoom: 1;
          li {
            position: relative;
            float: left;
            width: 320px;
            height: 370px;
            padding: 48px 30px 0 30px;
            color: #666;
            text-align: center;
            border-right: 1px dashed #e2e2e2;
            .false-shop {
              background: url("../../images/Product/shop.png") top left / cover;
            }
            .ig-type {
              position: absolute;
              width: 46px;
              height: 20px;
              top: 20px;
              left: 20px;
              color: #fff;
              text-indent: 8px;
              text-align: left;
              line-height: 20px;
            }
            p.title {
              font-size: 20px;
              line-height: 38px;
              color: #333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            p.labels {
              padding: 15px 0;
              span {
                display: inline-block;
                height: 20px;
                padding: 0 5px;
                color: #999;
                line-height: 18px;
                font-size: 11px;
                border: 1px solid #e2e2e2;
              }
            }
            .ig-num {
              font-size: 14px;
              line-height: 22px;
            }
            .word-c {
              display: flex;
              justify-content: center;
              sub {
                vertical-align: text-bottom;
                line-height: 40px;
              }
              .price {
                position: relative;
                font-size: 28px;
                color: #ff9200;
              }
              .price-type {
                position: absolute;
                width: 39px;
                height: 14px;
                right: -40px;
                bottom: 28px;
                text-align: center;
                background: url("../../images/Product/priceType.png");
                text-indent: 2px;
                line-height: 14px;
                color: #fff;
                font-size: 10px;
              }
            }
                    .ig-area {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .ig-btn {
                display: inline-block;
                width: 120px;
                height: 30px;
                margin-top: 20px;
                font-size: 14px;
                color: #fff;
                line-height: 30px;
                text-align: center;
                border-radius: 2px;
                background: #005196;
              }
          }
        }
      }
    }
  }
}
</style>
